﻿@model QuanLyCayXanh.Models.Report

@{
    ViewBag.Title = "Create";
}

<h2>Phát triển</h2>

@using (Html.BeginForm("Create", "Report",FormMethod.Post, new { @class = "pure-form pure-form-aligned" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>        
        <div class="pure-g pure-form pure-form-stacked">
            <div class="pure-u-5-24" style="padding-left:14%; padding-bottom: 5px;">
                @Html.Label("Quận:")
                @Html.DropDownList("District_Id", "Tất cả")
            </div>

            <div class="pure-u-5-24">
                @Html.Label("Phường: ")
                <div id="select-ward">@Html.Partial("~/Views/Tree/_SelectWard.cshtml")</div>
            </div>
            <div class="pure-u-9-24" style="margin-left:20px;">
                @Html.Label("Đường:")
                @Html.DropDownList("Street_Id", "Tất cả")
                <input type="button" id="btnSearch" class="button pure-button" value="Tìm kếm" />
            </div>            
        </div>

        <div class="pure-control-group">
            @Html.LabelFor(model => model.Tree_Id, "Cây xanh")
            @Html.DropDownList("Tree_Id",null, String.Empty, new {@class = "pure-input-1-2" })
            @Html.ValidationMessageFor(model => model.Tree_Id)
        </div>
        <div class="pure-control-group">
            <div class="pure-u-3-24" style="min-width:150px;"></div>
            <div class="pure-u-18-24" id="tree-infor"></div>
        </div>
        <div class="pure-control-group">
            @Html.LabelFor(model => model.Height)
            @Html.TextBoxFor(model => model.Height, new { @class = "pure-input-1-2" })
            @Html.ValidationMessageFor(model => model.Height)
        </div>

        <div class="pure-control-group">
            @Html.LabelFor(model => model.Diameter)
            @Html.TextBoxFor(model => model.Diameter, new { @class = "pure-input-1-2" })
            @Html.ValidationMessageFor(model => model.Diameter)
        </div>

        <div class="pure-control-group">
            @Html.LabelFor(model => model.Note)
            @Html.TextAreaFor(model => model.Note, new { @class = "pure-input-1-2" })
            @Html.ValidationMessageFor(model => model.Note)
        </div>

        <div class="pure-control-group">
            @Html.LabelFor(model => model.Rating)
            @Html.TextBoxFor(model => model.Rating, new { @class = "pure-input-1-5" })
            @Html.ValidationMessageFor(model => model.Rating)
        </div>

        <div class="pure-control-group">
            @Html.LabelFor(model => model.Image)
            @Html.TextBoxFor(model => model.Image, new { @class = "pure-input-1-2" })
            @Html.ValidationMessageFor(model => model.Image)
        </div>

        <div class="pure-control-group">
            @Html.LabelFor(model => model.Video)
            @Html.TextBoxFor(model => model.Video, new { @class = "pure-input-1-2" })
            @Html.ValidationMessageFor(model => model.Video)
        </div>

        <div class="pure-control-group">
            @Html.LabelFor(model => model.DateOfReference)
            @Html.TextBoxFor(model => model.DateOfReference, new { @class = "pure-input-1-2" })
            @Html.ValidationMessageFor(model => model.DateOfReference)
        </div>       

        <div class="pure-controls">
            <input type="submit" value="Lưu lại" class="pure-button pure-button-primary" />
            @Html.ActionLink("Quay lại danh sách", "Index", null, new { @class = "pure-button" })
        </div>
    </fieldset>
}


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script type="text/javascript">

    function init(data) {

        $("#map").empty();
        var arrTreeId = new Array();
        var arrTreeLonLat = new Array();

        map = new OpenLayers.Map("map");
        var mapnik = new OpenLayers.Layer.OSM();
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
        var position = new OpenLayers.LonLat(108.202622, 16.051794).transform(fromProjection, toProjection);
        var zoom = 13;

        map.addLayer(mapnik);

        if (data) {
            var markers = new OpenLayers.Layer.Markers("Markers");
            map.addLayer(markers);

            var count = 0;
            $.each(data, function (i, item) {
                var position1 = new OpenLayers.LonLat(item.PointY, item.PointX).transform(fromProjection, toProjection);
                var marker = new OpenLayers.Marker(position1)
                marker.events.register("click", marker, function (evt) {

                    var lonlat = evt.object.lonlat;
                    for (var i = 0; i < count; i++) {

                        if (lonlat.lon == arrTreeLonLat[i].lon && lonlat.lat == arrTreeLonLat[i].lat) {

                            $("#Tree_Id").val(arrTreeId[i]);
                            GetTree(arrTreeId[i]);                            
                        }
                    }
                })
                markers.addMarker(marker);
                arrTreeId[count] = item.Id;
                arrTreeLonLat[count] = marker.lonlat;
                count = count + 1;
            })

        }
        map.setCenter(position, zoom);

        // thay doi icon market.png
        $(".olAlphaImg").click(function () {
            //xoa het cac marker da danh dau truoc do
            $(".olAlphaImg[src*='red.png']").attr('src', '/Scripts/img/marker.png');
            //danh dau marker vua moi click
            $(this).attr('src', '/Scripts/img/marker-red.png');
        });

    }

    function GetTree(treeId) {
        $.post("GetTree", { id: treeId }, function (data) {
            $("#tree-infor").html(data);
        })
    }

    $(document).ready(function () {
        init();
        $("#btnSearch").click(function () {
            var streetId = $("#Street_Id").val();            
            var wardId = $("#Ward_Id").val();
            var districtId = $("#District_Id").val();
            var url = "@Url.Action("Search", "SystemReport")";
            $.getJSON(url, { districtId: districtId, wardId: wardId, streetId: streetId})
              .done(function (data) {
                  //load lai ban do
                  init(data);
              })
              .fail(function (jqxhr, textStatus, error) {
                  var err = textStatus + ", " + error;
                  console.log("Request Failed: " + err);
              });
        });

        $("#Tree_Id").change(function (e) {
            GetTree($(this).val());
        })        
    })
    
</script>

<div class="post">
    <h5>Bản đồ</h5>
    <div id="map" style="width: 100%; height: 500px; padding: 10px">
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $("#District_Id").change(function () {
            $.ajax({
                url: '@Url.Action("_GetSelectWard","Tree",null)',
                data: { District_Id: $("#District_Id").val() },
                type: 'POST',
                success: function (data) {
                    $("#select-ward").html(data);
                }
            });
        })
    });
</script>